<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">订单评价</block>
		</cu-custom>
		<view class="padding">
			<view class="bg-white radius-xl box">
				<view class="top flex flex-wrap padding-sm">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						订单号：{{info.trade}}
					</view>
				</view>
				
				<view class="block-item padding-sm padding-top-0 solid-bottom">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						您对技师的评价
					</view>
					<view class="info padding-sm">
						<image :src="info.technician_headimg" mode="" class="radius"></image>
						<view class="padding-left-sm">
							<text>{{info.technician_nickname}}</text>
							<view class="rate padding-top-sm">
								<text class="text-sm">评分：</text>
								<u-rate count="5" v-model="form.grade"></u-rate>
							</view>
						</view>
					</view>
					<view class="tag flex flex-wrap">
						<view class="padding-xs" v-for="(item,index) in tags" :key="index">
							<view class='cu-tag radius' 
								:class="item.isSelected==10?'bg-green light':''" 
								@click="toSelectTags(index)">
									{{item.name}}
							</view>
						</view>
						<view class="padding-xs">
							<view class='cu-tag radius' :class="form.technician_write == true?'bg-green light':''" @click="toSetTechnicianShow()">
								<text class="cuIcon-write"></text>
								<text>写评价</text>
							</view>
						</view>
					</view>
					<view class="content padding-sm bg-gray radius-lg margin-top-sm" v-if="form.technician_write == true">
						<textarea placeholder="请输入您对技师的评价内容" class="text-sm" v-model="form.content"></textarea>
					</view>
				</view>
				
				<view class="block-item padding-sm solid-bottom" v-if="info.shop_id">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						您对该门店的评价
					</view>
					<view class="info padding-sm">
						<image :src="info.shop_logo" mode="" class="radius"></image>
						<view class="padding-left-sm">
							<text>{{info.shop_title}}</text>
							<view class="rate padding-top-sm">
								<text class="text-sm">评分：</text>
								<u-rate count="5" v-model="form.shop_grade"></u-rate>
							</view>
						</view>
					</view>
					<view class="tag flex flex-wrap">
						<view class="padding-xs">
							<view class='cu-tag radius' :class="form.shop_write == true?'bg-green light':''" @click="toSetTechnicianShow()">
								<text class="cuIcon-write"></text>
								<text>写评价</text>
							</view>
						</view>
					</view>
					<view class="content padding-sm bg-gray radius-lg margin-top-sm" v-if="form.shop_write == true">
						<textarea placeholder="请输入您对技师的评价内容" class="text-sm" v-model="form.shop_content"></textarea>
					</view>
				</view>
				
				<view class="block-item padding-sm">
					<view>
						<text class="cuIcon-titles themeColor"></text>
						您对服务项目的评价
					</view>
					<view v-for="(item,index) in form.projects" :key="index" v-if="info.projects">
						<view class="info padding-sm">
							<image :src="item.thumb" mode="" class="radius"></image>
							<view class="padding-left-sm">
								<text>{{item.service_title}}</text>
								<view class="time padding-top-sm text-gray text-sm">
									服务时长：{{item.duration}}分钟
								</view>
							</view>
						</view>
						<view class="rate padding-left-sm">
							<text>评分：</text>
							<u-rate count="5" v-model="item.grade"></u-rate>
						</view>
						<view class="content padding-sm bg-gray radius-lg margin-top-sm">
							<textarea placeholder="请输入您对服务项目的评价内容" class="text-sm" v-model="item.content"></textarea>
						</view>
					</view>
				</view>
			</view>
					<view class="check basis-xs padding-left-sm padding-top" @click="setAnony()">
						<text :class="form.anony == 1 ?'cuIcon-roundcheckfill themeColor':'cuIcon-roundcheck'"></text>
						<text class="text-sm padding-left-sm">匿名提交</text>
					</view>
			
			<view class="submit margin-top-lg">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round"  @click="submit()">确认提交</button>
				</view>
			</view>
		</view>
		<loading v-if="pageLoading"/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageLoading:false,
				form:{
					trade:'',
					anony:0,
					grade:5,
					technician_write:false,
					content:'',
					shop_grade:5,
					shop_write:false,
					shop_content:'',
					projects:[]
				},
				info:{},
				tags:[]
			};
		},
		onLoad(options) {
			this.getOrderInfo(options.trade)
		},
		methods:{
			getOrderInfo(trade){
				this.pageLoading=true;
				this.$utils.$api.Orders.info(trade).then(data=>{
					this.info=data;
					this.form.trade=data.trade;
					for (let i = 0; i < data.projects.length; i++) {
						const project = data.projects[i];
						this.form.projects.push({
							service_id:project.service_id,
							thumb:project.thumb,
							service_title:project.service_title,
							duration:project.duration,
							grade:5,
							content:''
						})
					}
				}).catch(err=>{
					uni.showModal({
						title: '提示',
						content: err.msg,
						showCancel: false,
						success: () => {
							this.$utils.$page.back();
						}
					})
				}).finally(()=>{
					this.pageLoading=false
				})
			},
			submit(){
				this.pageLoading=true;
				this.$utils.$api.Comment.create(this.form).then((res)=>{
					this.$utils.$message.success(res.msg);
					setTimeout(()=>{
						this.$utils.$page.back();
					},300)
				}).catch(err=>{
					this.$utils.$message.error(err.msg)
				}).finally(()=>{
					this.pageLoading=false
				})
			},
			toSelectTags(index){
				let status = this.tags[index].isSelected == 10 ? 20 : 10;
				this.tags[index].isSelected = status;
			},
			toSetTechnicianShow(){
				let status = this.form.technician_write ? false : true;
				this.form.technician_write = status;
			},
			setAnony(){
				let status = this.form.anony == 1 ? 0 : 1;
				this.form.anony = status;
			}
		}
	}
</script>

<style lang="less" scoped>
.box{
	.top{
		display: flex;
		align-content: center;
	}
	.block-item{
		.info{
			display: flex;
			align-items: center;
			image{
				width: 100upx;
				height: 100upx;
			}
			.rate{
				flex: 1;
				display: flex;
			}
		}
		.content{
			textarea{
				height: 120upx;
				width: 100%;
			}
		}
	}
}
</style>
